Step 2 - Show the bloom effect

In this step you first apply the bloom effect to the headlights of the car. Then you show the bloom effect by blending it on top of the normally rendered scene.

In the next step you fine-tune the effect by applying it three more times.

To show the bloom effect:

1. In the Library right-click Materials and Textures, select Load Material Type From Disk, go to <KanziWorkspace>/Tutorials/Bloom/Assets, and load the GaussianBloom07.kzmat material type.
   Kanzi Studio adds the GaussianBloom07 material type and creates the GaussianBloom07Material material which provides a directional Gaussian blur effect using a kernel size of 7 pixels.
   You use this material to create the bloom effect.
   
2. Apply the first pass of the bloom effect:
   1. In the Library > Rendering > Render Passes > Bloom > Render Bloom create a Blit Render Pass, name it Blit Horizontal Bloom, and in the Properties add and set:
      • Texture0 to Bloom Threshold
      • Material to GaussianBloom07Material
      • Blur Direction X property field to 1
        This way you apply the blur effect in the horizontal direction.
      • Blur Radius to 2
        This way you set the strength of the blur effect.
      • Intensity to 1
        This way you set the intensity of the bloom effect.
      You use this render pass to draw the Bloom Threshold render pass using the GaussianBloom07Material material to apply to the car node the bloom effect with Gaussian blur in the horizontal direction.
      
      
   2. In the Library in the Render Bloom render pass create a Composition Target Render Pass, name it Horizontal Bloom 1, and drag the Blit Horizontal Bloom to the Horizontal Bloom 1 render pass.
      You use the Horizontal Bloom 1 render pass to render the Blit Horizontal Bloom render pass to a composition target. Later in this section you use the composition target as input to a render pass which applies the bloom effect with Gaussian blur in the vertical direction.
      
   3. In the Library select the Horizontal Bloom 1 render pass, in the Properties add the Resolution Divisor property, and set it to 2.
      This way you divide by 2 the resolution of the composition target to which the render pass renders itself.
      You reduce the resolution of the composition target to improve performance.
      
   4. In the Library duplicate the Horizontal Bloom 1 render pass and rename the new render pass to Vertical Bloom 1.
      You use this render pass to apply the blur in the vertical direction.
      
   5. In the Library select the Vertical Bloom 1 > Blit Horizontal Bloom render pass and in the Properties set:
      • Name to Blit Vertical Bloom
      • Texture0 to Horizontal Bloom 1
      • Blur Direction X property field to 0
      • Blur Direction Y property field to 0,5
        This way you apply the blur effect in the vertical direction.
        You use the value 0,5 because you divided the resolution of the Horizontal Bloom 1 render pass by 2. This way you create a symmetrical blur effect.
      You use this render pass to draw the Horizontal Bloom 1 render pass using the GaussianBloom07Material material to apply to the car node the bloom effect with Gaussian blur in the vertical direction.
      
3. Add the material that you use to combine several passes of the bloom effect:
   1. In the Library right-click Materials and Textures, select Load Material Type From Disk, go to <KanziWorkspace>/Tutorials/Bloom/Assets, and load the Combine.kzmat material type.
      Kanzi Studio adds the Combine material type and creates the CombineMaterial material which supports rendering four textures and defining a multiplication factor for each of them.
      
   2. In the Library > Materials and Textures > Materials select CombineMaterial and in the Properties set the Texture0, Texture1, Texture2, and Texture3 properties to < No Texture >.
      
4. In the Library > Rendering > Render Passes > Bloom create a Blit Render Pass, name it Blit Combined Bloom, and in the Properties set:
   • Texture0 to Vertical Bloom 1
   • Material to CombineMaterial
   You use this render pass to draw the Vertical Bloom 1 render pass to the screen using the CombineMaterial.
   In the next step of this tutorial you apply the bloom effect three more times and use this render pass to combine the outputs of all four passes.
   
   
5. In the Properties click next to the Material property to open the properties of the CombineMaterial, and set the Blend Mode property to Additive.
   To show the car with the headlights turned on, you blend the bloom effect with the normally rendered scene. You set the Blend Mode to Additive because to show the bloom effect you want to add its pixel values to those of the normally rendered scene.
   
   

See also

To learn more about the render passes in Kanzi, see Rendering.

To learn more about materials and material types, see Material types and materials.

Open topic with navigation